<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>网页聊天程序</title>
    <link href="css/common.css" rel="stylesheet">
    <link href="css/client.css" rel="stylesheet">
<!--    <script src="js/client.js"></script>-->
</head>
<body>
<!--    实现背景模糊-->
    <div class="cover"></div>
<!--    整个页面的总容器-->
    <div class="client-container">
<!--        中间的聊天区域-->
        <div class="main">
<!--            左侧区域，显示好友列表和会话列表-->
            <div class="left">
<!--                当前登录用户的用户名-->
                <div class="user">
                </div>
<!--                搜索框-->
                <div class="search">
                    <input type="text" placeholder="添加好友...">
                    <button></button>
                </div>
<!--                标签页-->
                <div class="tab">
<!--                    会话列表标签-->
                    <div class="tab-session"></div>
<!--                    好友列表标签-->
                    <div class="tab-friend"></div>
                </div>
                <!--会话列表-->
                <ul class="list" id="session-list">

                    <!--会话-->
<!--                    <li>-->
<!--                        <div class="session-wrapper">-->
<!--                            <span class="unread-badge" style="display: block">0</span>-->
<!--                            <h3>lisi</h3>-->
<!--                            <p>晚上吃啥</p>-->
<!--                        </div>-->
<!--                    </li>-->

<!--                    <li>-->
<!--                        <div class="session-wrapper">-->
<!--                            <span class="unread-badge" style="display: block">1</span>-->
<!--                            <h3>lisi</h3>-->
<!--                            <p>晚上吃啥</p>-->
<!--                        </div>-->
<!--                    </li>-->

<!--                    <li>-->
<!--                        <h3>lisi</h3>-->
<!--                        <p>晚上吃啥</p>-->
<!--                    </li>-->

<!--                    <li>-->
<!--                        <h3>lisi</h3>-->
<!--                        <p>晚上吃啥</p>-->
<!--                    </li>-->

<!--                     好友请求会话 -->
<!--                    <li>-->
<!--                        &lt;!&ndash; 双栏布局容器 &ndash;&gt;-->
<!--                        <div class="request-wrapper">-->
<!--                            &lt;!&ndash; 左侧用户信息（与普通会话保持相同结构） &ndash;&gt;-->
<!--                            <div class="user-meta">-->
<!--                                <h3>lisi</h3>-->
<!--                                <p>想和你了解一下</p>-->
<!--                            </div>-->

<!--                            &lt;!&ndash; 右侧操作按钮组 &ndash;&gt;-->
<!--                            <div class="action-group">-->
<!--                                <button class="agree-btn">同意</button>-->
<!--                                <button class="reject-btn">拒绝</button>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </li>-->

                </ul>
<!--                好友列表-->
                <ul class="list hide" id="friend-list">
<!--                    <li>-->
<!--                        <h4>lisi</h4>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <h4>lisi</h4>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <h4>lisi</h4>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <h4>lisi</h4>-->
<!--                    </li>-->
                </ul>
            </div>
<!--            右侧区域，显示聊天编辑框-->
            <div class="right">
<!--                会话标题-->
                <div class="title"></div>
<!--                消息区-->
                <div class="message-show">

<!--                    <div class="message message-left">-->
<!--                        <div class="box">-->
<!--                            <h4>lisi</h4>-->
<!--                            <p>今天吃啥</p>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="message message-right">-->
<!--                        <div class="box">-->
<!--                            <h4>zhangsan</h4>-->
<!--                            <p>随便</p>-->
<!--                        </div>-->
<!--                    </div>-->

                </div>
                <!--            消息编辑框-->
                <textarea class="message-input"></textarea>
<!--                发送按钮-->
                <div class="ctrl">
                    <button>发送</button>
                </div>
            </div>
            <!--添加好友区域当点击搜索按钮后才显示-->
            <div class="search-user-area hide">
                <div class="title">用户搜索结果</div>
                <ul class="user-show">
<!--                    好友申请模块-->
<!--                    <li>-->
<!--                        <h4>laosi</h4>-->
<!--                        &lt;!&ndash;申请理由&ndash;&gt;-->
<!--                        <input type="text" placeholder="请输入申请理由...">-->
<!--                        <button>申请</button>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <h4>zhaoliu</h4>-->
<!--                        &lt;!&ndash;申请理由&ndash;&gt;-->
<!--                        <input type="text" placeholder="请输入申请理由...">-->
<!--                        <button>申请</button>-->
<!--                    </li>-->
                </ul>
            </div>
        </div>
    </div>

<!--    这个引入操作要在使用之前-->
    <script src="js/jquery.min.js"></script>
    <script src="js/client.js"></script>
</body>
</html>